{% extends "base.html" %}
{% block content %}

<script type='text/javascript'>
function html_escape(str) {
	return str.replace(/&/g,"&amp;").replace(/</g,"&lt;")
		.replace(/>/g,"&gt;").replace(/"/, "&quot;")
		.replace(/'/, "&apos;");
}
</script>

<style>
.pending {
	color: red;
}
.comment-entry {
	cursor: pointer;
}
.comment-entry:hover {
	background-color: yellow;
}
</style>
<div style="padding-top: 1em;">
  <b>Why use gaeQuery?</b><br/>
  Write an AppEngine app with no server-side code what-so-ever!<br/>
  Just deploy gaeQuery at your appspot URL and just write all your CRUD in JavaScript!
</div>
<div style="height:1em;"></div>

<div style="float: left; width: 40%;">
  <div style="width: 80%">
    <div style="color: blue;"><b>A Sample Commenting app. to demonstrate gaeQuery</b></div>
    <div id="comments-div">Fetching Comments....</div>
    <div style="padding-top: 20px;">
      Add a comment:<br/>
      <textarea style="width: 100%;" rows="7" id="comments-textarea"></textarea><br/>
      <input type="button" id="submit-comment-button" value="Submit Comment" />
    </div>
  </div>
</div>

<div style="float: left; width: 40%;">
  <b style="color:blue;">Interactive Console:</b><br/>
  <textarea id="code-textarea" style="width: 100%" rows="7">
/* This will show you the 2nd and 3rd 
 * comments posted here
 */
(function populateCommentsDiv() {
  var populator = new GaeDeferred()
    .addCallBack(function(comments) {
      $('#results-div').html('');
      $(comments).each(function(i, elem) {
        $('#results-div').append(createComment(elem));
      });
    });
    $gae("comments").order("-date").fetch(2,1,populator);
}());</textarea>
  <br/><input type="button" id="execute-code" value="Execute Code" />

  <div style="margin-top: 20px; min-height: 10em; width: 100%; border: 1px solid green" id="results-div">
    See your results here.<br/>
    jQuery and gaeQuery are available here!!<br/>
    This div has an id = "results-div"<br/>
  </div>
</div>

<div style="clear: both;"></div>



<script type='text/javascript'>

function createComment(elem) {
	// console.log("KEY1:", elem.key().toString());
	return $("<div></div>").html(html_escape(elem.body))
			.css("margin-top", "10px")
			.addClass("comment-entry")
			.css("min-height", "1em")
			.attr("title", "Click to delete this comment")
			.attr("key", elem.key().toString());
}


$(document).ready(function() {

	(function populateCommentsDiv() {
		var populator = new GaeDeferred().addCallBack(function(comments) {
			$('#comments-div').html('');
			$(comments).each(function(i, elem) {
				$('#comments-div').append(createComment(elem));
			});
		});
		$gae("comments").order("-date").fetch(100, 0, populator);
	}());

	$("#submit-comment-button").click(function() {
		var adder = new GaeDeferred().addCallBack(function(comment) {
			// console.log("COMMENT:", comment);
			var commentObject = createComment(comment);
			$('#comments-div').append(commentObject);
			$('#comments-textarea').val('');
		});
		var comment = $gae("comments").create();
		comment.body = $('#comments-textarea').val();
		comment.date = "2010/04/02";
		comment.popularity = 21;
		comment.mitra = "anirban";
		comment.put(adder);
	});

	$('#code-textarea').autogrow();
	
	$('#execute-code').click(function() {
		eval($('#code-textarea').val());
	});
	
	$(".comment-entry").live("click", function() {
		var entryDiv = this;
		var entryRemover = new GaeDeferred().addCallBack(function() {
			$(entryDiv).remove();
		});
		$(this).removeClass('.comment-entry');
		$gae("comments").create().key($(this).attr("key")).remove(entryRemover);
	});
});

</script>

{% endblock %}
